<template>
  <div class="otherform-mobile">
    <div class="wrap-item">
      <div style="text-align: center;" v-if="tableData1.length > 0" class="f-value">{{tableData1[0].title}}</div>
    </div>
    <div class="wrap-item-title">基本信息</div>
    <div class="wrap-item" v-if="tableData1.length > 0">
      <van-field input-align="right" label="发起部门" :value="tableData1[0].department" readonly />
      <van-field input-align="right" label="发起人" :value="tableData1[0].name" readonly />
      <van-field input-align="right" label="发起日期" :value="tableData1[0].date" readonly />
      <van-field input-align="right" :maxlength="50" placeholder="请输入内容" v-if="status === 'create'" label="发起事宜" v-model="tableData1[0].matters"/>  
      <div v-else class="form-item">
        <div class="form-item-title">发起事宜</div>
        <div class="form-item-con">{{tableData1[0].matters}}</div>
      </div>  
    </div>
    <div v-if="status === 'create'" style="margin: 30px 0 0;text-align: center;">
      <p-button @click="submit" type="primary">提交</p-button>
    </div>
    <div v-if="status === '2' || status === '1'">
      <div class="wrap-item-title">审批内容</div>
      <div class="wrap-item" v-for="item in tableData2">
        <div v-if="showSpan" class="form-item">
          <div class="form-item-title">代表处</div>
          <div class="form-item-con">{{item.province}}</div>
        </div>  
        <van-field input-align="right" label="代表处" v-if="showInput" v-model="item.province" placeholder="请输入内容" :maxlength="50" />
        <div v-if="showSpan" class="form-item">
          <div class="form-item-title">月份</div>
          <div class="form-item-con">{{item.month}}</div>
        </div>  
        <van-field input-align="right" label="月份" v-if="showInput" v-model="item.month" placeholder="请输入内容" :maxlength="50" />
        <div v-if="showSpan" class="form-item">
          <div class="form-item-title">类型</div>
          <div class="form-item-con">{{item.type}}</div>
        </div>  
        <van-field input-align="right" label="类型" v-if="showInput" v-model="item.type" placeholder="请输入内容" :maxlength="50" />
        <div v-if="showSpan" class="form-item">
          <div class="form-item-title">客户单位</div>
          <div class="form-item-con">{{item.company}}</div>
        </div> 
        <van-field input-align="right" label="客户单位" v-if="showInput" v-model="item.company" placeholder="请输入内容" :maxlength="50" />
        <div v-if="showSpan" class="form-item">
          <div class="form-item-title">预计可签合同金额</div>
          <div class="form-item-con">{{item.estimatePrice}}</div>
        </div> 
        <van-field input-align="right" label="预计可签合同金额" type="number" v-if="showInput" v-model="item.estimatePrice" placeholder="请输入数字" :maxlength="50" />
        <div v-if="showSpan" class="form-item">
          <div class="form-item-title">本次确认销售金额</div>
          <div class="form-item-con">{{item.arrivalPrice}}</div>
        </div>
        <van-field input-align="right" label="本次确认销售金额" type="number" v-if="showInput" v-model="item.arrivalPrice" placeholder="请输入数字" :maxlength="50" />
        <div v-if="showSpan" class="form-item">
          <div class="form-item-title">收入归属事业部</div>
          <div class="form-item-con">{{item.ascriptionBusiness}}</div>
        </div>
        <van-field input-align="right" label="收入归属事业部" v-if="showInput" v-model="item.ascriptionBusiness" placeholder="请输入内容" :maxlength="50" />
        <div v-if="showSpan" class="form-item">
          <div class="form-item-title">责任人</div>
          <div class="form-item-con">{{item.userName}}</div>
        </div>
        <van-field input-align="right" label="责任人" v-if="showInput" v-model="item.userName" placeholder="请输入内容" :maxlength="50" />
      </div>
    </div>
  </div>
</template>
<script>
import Bus from '@/utils/bus'
import { timestampToDatetime, getParameterByName } from '@/utils/util'
import process from '@/api/process'
export default {
  props: {
    step: String,
    status: String,
    processInstanceId: String,
    taskId: String,
  },
  data() {
    return {
      formTitle: '',
      processDefinitionName: '',
      formDate: '',
      uid: '',
      tableData1: [
        /* {
          title: '流程标题xx',
          name: 'xx发起人',
          department: 'xx部门',
          date: 'xx日期',
          matters:'xx发起事宜',
        } */
      ],
      tableData2: [
        {
          key: 0,
          province: '',
          month: '',
          type: '',
          company: '',
          estimatePrice: '',
          arrivalPrice: '',
          ascriptionBusiness: '',
          userName: '',
        },
      ],
    };
  },
  computed: {
    showSpan(){
      return this.status === '2' || ( this.status === '1' && this.step && this.step !== 'b');
    },
    showInput(){
      return this.status === '1' && this.step && this.step === 'b';
    },
  },
  methods: {
   submitForm2(event){
     if ( this.step && (this.step === 'b') ){
       process.addSaleDetail({
          processInstanceId: this.processInstanceId,
          saleInfoDetailParamList: this.tableData2,
        }).then( res =>{
          console.log('提交表单2成功',res);
          Bus.$emit('nextSubmitMobile');
        })
     }
    },
    submit(){
      process.saleInfo({
        "date": this.tableData1[0].date,
        "department": this.tableData1[0].department,
        "matters": this.tableData1[0].matters,
        "title": this.tableData1[0].title,
        "uid": this.uid,
        "processDefinitionKey": getParameterByName('processDefinitionKey'),
      }).then( res =>{
        this.$message.success('提交成功');
        setTimeout( function(){
          if (window.opener && window.opener.dispatchEvent) {
              window.opener.dispatchEvent(new Event('getTableData'))
          } else {
              window.opener.fireEvent(new Event('getTableData'))
          }
          window.opener = null;
          window.open('', '_self');
          window.location.href="about:blank";
          window.close();
        },1000);
      })
    }
  },
  created(){
    // 第一步
    if (this.status === 'create' ){
      this.formDate = timestampToDatetime(new Date().getTime(),1);
      process.getProcessParams(getParameterByName('processDefinitionKey')).then( res =>{
        const curData = res.data
        this.processDefinitionName = curData.processDefinitionName
        process.userInfo().then(res=>{
          if(res.code === 0) {
            const curData = res.data;
            this.formTitle = `${curData.name}申请的${this.processDefinitionName}${this.formDate}`;
            this.uid = curData.uid;
            this.tableData1 = [
              {
                key: 1,
                title: this.formTitle,
                name: curData.name,
                department: curData.departmentName,
                date: this.formDate,
                matters:'',
              }
            ]
          }else {
            console.log('报错了');
          }
        })
      })
    }else {
      // 获取当前人的uid
      process.userInfo().then(res=>{
        if(res.code === 0) {
          const curData = res.data;
          this.uid = curData.uid;
          if ( this.status === '2' ){
            let curUid = '';
            if ( this.step && this.step === 'b'){
              curUid = this.uid;
            }
            process.getSaleInfoDetail({
              "processInstanceId": this.processInstanceId,
              "uid": curUid,
            }).then( res =>{
              this.tableData2 = res.data || [];
              this.tableData2.forEach( (el, i) =>{
                el.key = i;
              });
            })
          }
          if ( this.status === '1' && (this.step && this.step !== 'b') ){
            process.getSaleInfoDetail({
              "processInstanceId": this.processInstanceId,
              "uid": '',
            }).then( res =>{
              this.tableData2 = res.data || [];
              this.tableData2.forEach( (el, i) =>{
                el.key = i;
              });
            })
          }
        }else {
          console.log('报错了');
        }
      })
      process.getSaleInfo({
        "processInstanceId": this.processInstanceId, // modelId
      }).then( res =>{
        const curData = res.data;
        this.tableData1 = [
          {
            ...curData,
            name: curData.userName,
            key: 1,
          }
        ]
      })
    }
  },
  mounted(){
    Bus.$on('prevSubmitMobile',(val) =>{
      this.submitForm2();
      console.log('可以提交了 表单一数据',val);
    });
  }
};
</script>
<style lang="less">
.otherform-mobile{
  .wrap-item{
    margin-bottom: 20px;
    padding: 0 10px;
  }
  .wrap-item-title{
    padding: 10px;
    background: #f2f2f2;
  }
  .van-field__label{
    width: 116px;
  }
  .form-item{
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    justify-content: space-between;
    position: relative;
    &:after{
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0;
      bottom: 0;
      left: 16px;
      border-bottom: 1px solid #ebedf0;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
    }
  }
  .form-item-title{
    word-break: keep-all;
    display: flex;
    align-items: center;
    margin-right: 10px;
  }
  .form-item-con{
    word-break: break-all;
  }
}
</style>
